<template>
	<div class="basic_wrap">
<!--		<div class="red_top_bg">-->
<!--			<div class="big_tit">{{$t('home.invest')}}</div>-->
<!--		</div>-->
		<div class="item_wrap">
<!--			<div class="tabs" v-show="show_tabs">-->
<!--				<van-tabs type="card" v-model="active" @click="sort">-->
<!--					<van-tab v-for="(tab,index) in tabs" :title="tab.title" :key="index"></van-tab>-->
<!--				</van-tabs>-->
<!--			</div>-->
      <div class="newTab" v-show="show_tabs">
        <div class="newTabItem" v-for="(tab,index) in tabs" :key="index" :class="[active == index ? 'newTabItemActive':'']"
             @click="sort(index)"
        >
            <div>{{tab.title}}</div>
            <div class="line"></div>
        </div>
      </div>
			<div class="item_list block_div">
        				<van-list v-model="loading" loading-text="" offset="100" :finished="finished"
        					:finished-text="$t('utils.noData')" @load="onLoad">
                  <leveList :list="list"></leveList>
        				</van-list>
<!--				<van-list v-model="loading" loading-text=" " offset="100" :finished="finished"-->
<!--					:finished-text="$t('utils.noData')" @load="onLoad">-->
<!--					<div v-for="(item,index) in list" class="block_div item"-->
<!--						@click="$router.push('/invest/detail/'+item.id)">-->
<!--						<div class="logo">-->
<!--							<img v-lazy="item.img" />-->
<!--							<div>{{item.title}}</div>-->
<!--						</div>-->
<!--						<div class="flex_center detail">-->
<!--							<div>-->
<!--								<div><span class="detail_name">{{$t('index.amount')}}</span><span class="detail_num">{{common.currency_symbol_basic()}}{{common.precision_basic(item.min)}}</span></div>-->
<!--								<div><span class="detail_name">{{$t('index.cycle')}}</span><span class="detail_num">{{item.day}}{{item.type==3?$t('index.hour'):$t('index.day')}}</span></div>-->
<!--							</div>-->
<!--							<div>-->
<!--								<div><span class="detail_name">{{item.type==1?$t('index.dailyRate'):$t('index.rate')}}</span><span class="detail_num">{{item.rate}}%</span></div>-->
<!--								<div><span class="detail_name">{{$t('invest.income')}}</span><span class="detail_num">{{common.currency_symbol_basic()}}{{change(item)}}</span></div>-->
<!--							</div>-->
<!--						</div>-->
<!--					</div>-->
<!--				</van-list>-->
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue';
	import bsHeader from '../../components/bsHeader.vue'
  import leveList from "@/components/leveList.vue";
	import Fetch from '../../utils/fetch'
	import {
		Tab,
		Tabs,
		List,
		Empty,
		Lazyload
	} from 'vant';
	Vue.use(Tab).use(Tabs).use(List).use(Empty).use(Lazyload);
	export default {
		name: "",
		components: {
			bsHeader,
      leveList
		},
		data() {
			return {
				data: [],
				show_tabs:false,
				tabs: [{
						id: 0,
						title: this.$t('tabs.all')
					}

				],
				active: 0,
				empty: false,
				loading: false,
				finished: false,
				list: [],
				page: 1,
				listRows: 8,
			};
		},
		// //创建前设置
		// beforeCreate() {
		// 	//解决List上拉加载bug
		// 	document.querySelector('body').style["overflow-y"] = "unset";
		// },
		// //销毁前清除
		// beforeDestroy() {
		// 	document.querySelector('body').style["overflow-y"] = "scroll";
		// },
		created() {
			if (window.plus) {
				plus.navigator.setStatusBarBackground('#FAFAFA');
				plus.navigator.setStatusBarStyle('dark');
			}
			this.$parent.footer('invest', true);
		},
		mounted() {
			if (this.$router.history.current.query.type) {
				this.active = parseInt(this.$router.history.current.query.type);
			}
			this.start();
		},
		methods: {
			change(item) {
				if (item.type == 1) {
					return this.common.precision_basic(item.min * item.rate * item.day / 100);
				} else {
					return this.common.precision_basic(item.min * item.rate / 100);
				}
			},
			start() {
				Fetch('/index/item_class').then((r) => {
					var tabs1 = [{
						id: 0,
						title: this.$t('tabs.all')
					}];
					r.data.classes.forEach(item => {
						tabs1.push({
							id: item.id,
							title: item.title,
						})
					})
					this.tabs = tabs1;
					this.show_tabs = true;
				});
			},
			sort(index) {
        this.active = index
				this.page = 1;
				this.empty = false;
				this.list = [];
				this.finished = false;
				this.loading = true;
				this.onLoad();
			},
			onLoad() {
				Fetch('/index/item_list', {
					page: this.page,
					listRows: this.listRows,
					type: this.tabs[this.active]['id']
				}).then(r => {
					if (r.data.length == 0) this.empty = true;
					var list = r.data.list;
					for (var i = 0; i < list.length; i++) {
						this.list.push(list[i]);
					}
					if (this.list.length >= r.data.length) {
						this.finished = true;
						return;
					}
					this.page = this.page + 1;
					this.loading = false;
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	.basic_wrap {
		position: relative;
		padding-bottom: 100px;
    min-height: 100vh;
    box-sizing: border-box;
    background-image: url(../../assets/img/otherBac.png);
    background-size: cover;
    background-position: center top;
	}
	.red_top_bg {
		position: fixed;
		top: 0;
		z-index: 10;
		box-shadow:unset;
		background: #FAFAFA;
		.big_tit{
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.item_wrap {
		width: 100%;
		padding-top: 15px;

		.tabs {
			position: fixed;
			z-index: 100;
			width: 100%;
			background: #FAFAFA;
		}
    .newTab{
      display: flex;
      overflow: auto;
      scrollbar-width: thin; /* 设置滚动条宽度 */
      scrollbar-color: transparent transparent; /* 设置滚动条颜色为透明 */
      margin-left: 16px;
      padding-top: 30px;
      margin-bottom: 8px;
       .newTabItem{
          font-size: 14px;
          margin-right: 24px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          white-space: nowrap;
         .line{
           width: 48px;
           height: 2px;
           margin-top: 14px;
           background:transparent;
         }
       }
      .newTabItemActive{
        font-size: 16px;
        font-weight: bold;
        .line{
          background: linear-gradient(0deg, #0038FF 0%, #018DFF 100%);
        }
      }
    }
		.item_list {
			.item {
			margin-bottom: 10px;
			.logo {
				position: relative;
				div{
					position: absolute;
					bottom: 0px;
					width: 100%;
					background: #FFFFFF;
					height: 30px;
					line-height: 30px;
					opacity: 0.8;
					font-weight: bold;
					padding: 0 10px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				img {
					width: 100%;
					border-radius: 5px;
					max-height: 260px;
				}
			}

			.detail {
				padding: 15px;
				line-height: 2;

				.detail_name {
				}

				.detail_num {
					font-weight: bold;
					color: #3CB371;
				}
			}
		}

		}
	}
	/deep/.van-tabs__nav--card{
		margin: 0 2%;
	}
	/deep/.van-tabs{
		margin-bottom: 10px;
	}
	/deep/.van-tabs__nav--card .van-tab{
		border-right: unset;
		background: #FFFFFF;
		margin-right: 10px;
		border-radius: 15px;
	}
	/deep/.van-tabs__nav--card{
		border: unset;
	}
	/deep/.van-tabs__nav{
		background: unset;
	}
	/deep/.van-tabs__nav--card .van-tab.van-tab--active{
		background: #0F6EFF;
	}
</style>
